import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as ModalAction from '../store/actions/modal.actions'

function Modal({ show, show_async, hideModal }) {
  const styles = {
    width: 200,
    height: 200,
    position: 'absolute',
    left: '50%',
    top: '50%',
    marginLeft: -100,
    marginTop: -100,
    backgroundColor: 'skyblue',
    display: show ? 'block' : 'none'
  }

  return (
    <div>
      <button onClick={show_async}>显示</button>
      <button onClick={hideModal}>隐藏</button>
      <div style={styles}></div>
    </div>
  )
}

const mapStateToProps = state => ({
  show: state.modal.show
})

const mapActionToProps = dispatch => bindActionCreators(ModalAction, dispatch)

export default connect(mapStateToProps, mapActionToProps)(Modal)
